/* eslint-disable react/jsx-filename-extension */
import { LoadingOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import { StepC } from '@/src/components';
import { PrimaryC } from '@/src/comps';

const StepDemo = () => {
  const [nowStep, setNowStep] = useState(0);
  const [status, setStatus] = useState('process'); // 状态 wait process finish error
  const [visible, setVisible] = useState(false);
  const [nowStep1, setNowStep1] = useState(0);
  const [visible1, setVisible1] = useState(false);
  const [status1, setStatus1] = useState('process');

  const changeStep = () => {
    setNowStep(1);
  };
  const changVisible1 = () => {
    setVisible1(!visible1);
    setTimeout(() => {
      setNowStep1(1);
    }, 2000);
    setTimeout(() => {
      setNowStep1(2);
      setStatus1('process');
    }, 3000);

    setTimeout(() => {
      setVisible1(false);
      setNowStep1(0);
      setStatus1('process');
    }, 5000);
  };
  const changVisible = () => {
    setVisible(!visible);
    setTimeout(() => {
      setNowStep(1);
    }, 2000);
    setTimeout(() => {
      // setNowStep(2)
      setStatus('error');
    }, 3000);
    //  setTimeout(() => {
    //   setStatus('finish')
    //   // setVisible(false)
    //  }, 5000);
    //  setTimeout(() => {
    //   setStatus('process')
    //   setNowStep(0)
    //  }, 6000);
  };
  const onClose = () => {
    setVisible(false);
    setStatus('process');
    setNowStep(0);
  };
  const onClose1 = () => {
    setVisible1(false);
    setStatus1('process');
    setNowStep1(0);
  };
  return (
    <div style={{ padding: '10px' }}>
      <PrimaryC title={'点击可见（失败）'} onClick={changVisible} />
      {/* <PrimaryC title={"修改进度"} onClick={changeStep}/>
  <PrimaryC title={"修改状态"} onClick={changeStatus}/> */}
      <StepC
        // size={'small'}
        status={status}
        nowStep={nowStep}
        visible={visible}
        onClose={onClose}
        items={[
          {
            title: '用户发起',
            disabled: true,
            icon: status === 'process' && nowStep === 0 ? <LoadingOutlined /> : undefined,
          },
          {
            title: '验资验券',
            disabled: true,
            icon: status === 'process' && nowStep === 1 ? <LoadingOutlined /> : undefined,
            description: status === 'error' && nowStep === 1 ? '报错原因' : '',
          },
          {
            title: '簿记下达',
            icon: status === 'process' && nowStep === 2 ? <LoadingOutlined /> : undefined,
            disabled: true,
          },
        ]}
      />
      <div style={{ marginTop: '15px' }}>
        <PrimaryC title={'点击可见（成功）'} onClick={changVisible1} />
        <StepC
          // size={'small'}
          status={status}
          nowStep={nowStep1}
          visible={visible1}
          onClose={onClose1}
          items={[
            {
              title: '用户发起',
              disabled: true,
              icon: status1 === 'process' && nowStep1 === 0 ? <LoadingOutlined /> : undefined,
            },
            {
              title: '验资验券',
              disabled: true,
              icon: status1 === 'process' && nowStep1 === 1 ? <LoadingOutlined /> : undefined,
              description: status1 === 'error' && nowStep1 === 1 ? '报错原因' : '',
            },
            {
              title: '簿记下达',
              icon: status1 === 'process' && nowStep1 === 2 ? <LoadingOutlined /> : undefined,
              disabled: true,
            },
          ]}
        />
      </div>
    </div>
  );
};

export default StepDemo;
